<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" v-if="formElData">
      <el-row :gutter="formElData[0].gutter">
        <el-col :span="formElData[0].titleData.span">
          <h3>{{ formElData[0].titleData.title }}</h3>
        </el-col>
        <template v-for="item in formElData[0].hederData.data">
          <el-col
            :key="item.dataName"
            :span="formElData[0].hederData.span"
            v-show="formElData[0].judge(title)"
          >
            <formItemVue :data="item" :form="form" />
          </el-col>
        </template>
      </el-row>
      <el-row :gutter="formElData[0].gutter">
        <template v-for="(item, index) in formElData[0].children">
          <el-col
            :span="formElData[0].span || 12"
            :key="item.dataName + index"
            v-show="!item.hidden"
          >
            <formItemVue :data="item" :form="form" />
            <template v-if="item.inlineEl && item.inlineEl.length > 0">
              <formItemVue
                v-for="items in item.inlineEl"
                :key="items.dataName"
                :data="items"
                :form="form"
              />
            </template>
          </el-col>
        </template>
      </el-row>

      <div style="margin-left: 3px; margin-bottom: 20px">
        <h3>
          {{ formElData[1].title }}
          <el-switch v-model="showConf" style="margin-left: 10px"></el-switch>
        </h3>
      </div>
      <el-row v-if="showConf">
        <el-col
          :span="formElData[1].showSpan || 12"
          v-for="item in formElData[1].showData"
          :key="item.dataName"
        >
          <formItemVue :data="item" :form="form" />
        </el-col>
      </el-row>
      <el-row>
        <el-col
          v-for="item in formElData[1].children"
          :span="item.span || 12"
          :key="item.dataName"
        >
          <formItemVue :data="item" :form="form" />
        </el-col>
      </el-row>
    </el-form>
    <el-empty v-else description="暂无数据模板"></el-empty>
  </div>
</template>

<script>
import formElDatas from "./databaseData";
import formItemVue from "@/components/FormItem/index.vue";

export default {
  name: "changeDatasouceInfo",
  props: {
    type: {
      required: true,
    },
    form: {
      type: Object,
      required: true,
    },
    title: {
      type: String,
    },
  },
  components: {
    formItemVue,
  },
  data() {
    return {
      rules: {},
      data_typeList: [],
      formElData: null,
      showConf: false,
      rules: {},
      updateView: 0,
    };
  },
  mounted() {
    if (this.$props.form.type) {
      this.formElData = formElDatas[this.$props.form.type.toLowerCase()];
      this.getRules();
    }
  },
  methods: {
    getRules() {
      let that = this;
      if (!this.formElData) {
        return;
        
      }
      this.formElData.forEach((f) => {
        f.children.forEach((c) => {
          if (typeof c.dataName == "function") {
            c.dataName = c.dataName(that.$props.form);
          }
          this.rules[c.dataName] = c.rules
            ? c.rules
            : [
                {
                  required: true,
                  message: `请输入${c.label}`,
                  trigger: "change",
                },
              ];
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

::v-deep .el-col {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
